import React, { FC } from "react";
import AnnularChart from "@/components/AnnularChart";
import { initialAnnularState } from "@/constant";
import type {
  ChartPropsType,
  AnnularStateOptionType,
} from "@/types/echartInterface";
import useGetAnnularData from "@/hooks/useGetAnnularData";
const AnnularView: FC<ChartPropsType> = (props: ChartPropsType) => {
  const { times } = props;
  const { data, loading } = useGetAnnularData(times);
  const { annularList = initialAnnularState.annularList } =
    data as AnnularStateOptionType;
  const AnnularStyle = {
    width: "500px",
    height: "300px",
  };

  return (
    <div>
      {!loading && (
        <AnnularChart
          title="设备类型分布"
          annularChartStyle={AnnularStyle}
          annularList={annularList}
          colorList={initialAnnularState.colorList}
        />
      )}
    </div>
  );
};

export default AnnularView;
